<template>
	<view class="page-content">
		<view class="bg_fff pd-20">
			<view class="itemBaseBox">
				<u-image :src="user.headimg" width="130rpx" height="130rpx" shape="circle"></u-image>
				<view class="itemBase f_28">
					<view class="display_row_btn_center"><text class="c_333333 title">{{user.username}}</text>
						<view class="bgVip">
							<view class="ml-10">
								<u-image
									src="https://dtkj-qnyimg.diankuai.com/%E6%88%91%E7%9A%84/%E5%88%9B%E4%BA%AB%E9%9D%92%E9%93%9Cvip1.png"
									width="150rpx" height="40rpx" mode="widthFix">
								</u-image>
							</view>
							<text class="c_ffffff f_20 vipText">{{user.vip_name}}</text>
						</view>
					</view>
					<view class="display_row_btn_center">
						<view class="c_333333 mt-8">收益：<text class="c_C62B2C f_34">￥{{user.amount}}</text></view>
					</view>
				</view>
			</view>
		</view>

		<u-list v-if="dataList.length" @scrolltolower="listScrollTolower" :customStyle="{
			flex:'1',
			backgroundColor:'transparent',
			boxSizing: 'border-box', paddingLeft:'20rpx', paddingRight:'20rpx' }" height="0">
			<order-item :dataItem="item" @clickItem="clickListItem" v-for="(item, index) in dataList" :key="index">
			</order-item>
		</u-list>
		<u-empty mode="list" v-else :customStyle="{flex:'1',backgroundColor:'#fff'}"></u-empty>
	</view>
</template>

<script>
	import {
		getFromOne,
		getFromOrder
	} from '@/config/api.js'

	export default {
		data() {
			return {
				id: "",
				user: null,
				dataList: [],
				page: 1,
				pages: 1,
			}
		},
		onLoad(op) {
			this.id = op.id;
			this.getOne();
			this.getList();
		},
		methods: {
			getOne() {
				getFromOne({
					id: this.id
				}).then(res => {
					this.user = res;
				}).catch(err => {})
			},
			getList() {
				var form = {
					user_id: this.id,
					page: this.page
				}

				getFromOrder(form).then(res => {
					this.total = res.total;
					this.dataList = this.dataList.concat(res.list);
					this.pages = res.page.pages;
					this.page++;
				}).catch((err) => {

				});
			},
			listScrollTolower() {
				if (this.page <= this.pages) {
					this.getList();
				}
			},
		}
	}
</script>

<style scoped>
	.itemBaseBox {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		flex: 6;
	}

	.itemBase {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-start;
		margin-left: 20rpx;
		height: 130rpx;
		flex: 2;
	}

	.bgVip {
		position: relative;
	}

	.title {
		font-size: 36rpx;
		font-weight: 600;
	}

	.vipText {
		position: absolute;
		top: 3px;
		left: 70rpx;
	}
</style>
